<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="carLicense">
      <el-form-item label="号牌号码" prop="plate" class="form-item ">
        <el-input placeholder="请输入内容" v-model="ruleForm.plate"></el-input>
      </el-form-item>
      <el-form-item label="车辆类型" prop="carType" class="form-item ">
        <el-input placeholder="请输入内容" v-model="ruleForm.carType"></el-input>
      </el-form-item>
      <el-form-item label="所有人" prop="owner" class="form-item full">
        <el-input placeholder="请输入内容" v-model="ruleForm.owner"></el-input>
      </el-form-item>
      <el-form-item label="住址" prop="address" class="form-item full">
        <el-input placeholder="请输入内容" v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="使用性质" prop="usingNature" class="form-item ">
        <el-input placeholder="请输入内容" v-model="ruleForm.usingNature"></el-input>
      </el-form-item>
      <el-form-item label="品牌型号" prop="carCarBrand" class="form-item ">
        <el-input placeholder="请输入内容" v-model="ruleForm.carCarBrand"></el-input>
      </el-form-item>
      <el-form-item label="车辆识别代号/车架号" prop="carFrameNo" class="form-item warp-line">
        <el-input placeholder="请输入内容" v-model="ruleForm.carFrameNo"></el-input>
      </el-form-item>
      <el-form-item label="发动机号码" prop="carEngineNo" class="form-item ">
        <el-input placeholder="请输入内容" v-model="ruleForm.carEngineNo"></el-input>
      </el-form-item>
      <el-form-item label="注册日期" prop="carDeliveryDate" class="form-item">
        <el-date-picker
          v-model="ruleForm.carDeliveryDate"
          type="date"
          placeholder="请选择日期" value-format="yyyyMMdd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发证日期" prop="issueDate" class="form-item">
        <el-date-picker
          v-model="ruleForm.issueDate"
          type="date"
          placeholder="请选择日期" value-format="yyyyMMdd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="机动车登记证书编号" prop="carCarRegisterNo" class="form-item warp-line">
        <el-input placeholder="请输入内容" v-model="ruleForm.carCarRegisterNo"></el-input>
      </el-form-item>
      <el-form-item label="车身颜色" prop="carCarColor" class="form-item ">
        <el-input placeholder="请输入内容" v-model="ruleForm.carCarColor"></el-input>
      </el-form-item>
      <el-form-item label="排气量" prop="carDispalcement" class="form-item ">
        <el-input placeholder="请输入内容" v-model="ruleForm.carDispalcement"></el-input>
      </el-form-item>
      <el-form-item label="开票价" prop="carFare" class="form-item ">
        <el-input placeholder="请输入内容" v-model="ruleForm.carFare"></el-input>
      </el-form-item>
      <el-form-item label="燃油种类" prop="carFuelType" class="form-item ">
        <el-select v-model="ruleForm.carFuelType" placeholder="请选择">
          <el-option v-for="item in carFuelTypeList" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <!--下方footer-->
    <footer>
      <UploadCar @listencar="readCarInfo"></UploadCar>
      <el-button @click="next('ruleForm')">下一步</el-button>
    </footer>
  </div>
</template>

<script>
  import UploadCar from '../upload/UploadCar.vue'
  import eventVue from '../../assets/js/eventVue.js'

  export default {
    name: 'Car',
    data() {
      return {
        carFuelTypeList: [],

        ruleForm: {
          carFuelType: '',
          carDeliveryDate: '',
          carCarRegisterNo: '',
          carCarBrand: '',
          carCarColor: '',
          carFare: '',
          carDispalcement: '',
          carFrameNo: '',
          carEngineNo: '',
          piecesStatus: '',
          plate: '',
          carType: '',
          owner: '',
          address: '',
          issueDate: '',
          usingNature: ''
        },

        rules: {
          region1: [
            {required: false, message: '不能为空', trigger: 'change'},
          ],
          region2: [
            {required: false, message: '不能为空', trigger: 'change'},
          ],
          region3: [
            {required: false, message: '不能为空', trigger: 'change'},
          ],
          region4: [
            {required: false, message: '不能为空', trigger: 'change'},
          ],
          region5: [
            {required: false, message: '不能为空', trigger: 'change'},
          ],
          region6: [
            {required: false, message: '不能为空', trigger: 'change'},
          ],
          region7: [
            {required: false, message: '不能为空', trigger: 'change'},
          ],
          region8: [
            {required: false, message: '不能为空', trigger: 'change'},
          ],
          region9: [
            {required: false, message: '不能为空', trigger: 'change'},
          ],
          region10: [
            {required: false, message: '不能为空', trigger: 'change'},
          ],
        },
        dialogFormVisible: false,

        formLabelWidth: '120px',
        active: 0,
        selected: 0,

      };
    },
    mounted() {
      this.$store.commit('title', '车辆信息')
      this.axios.get('/zyapply-api/parameter/bizSystem/'+sessionStorage.getItem('instNo')).then((res) => {
        if (res.data.status == 200) {
          var carFuelTypeData = res.data.data.data[99];
          for (var i = 0; i < carFuelTypeData.length; i++) {
            var card_item = {};
            card_item.value = res.data.data.data[99][i].ovValue;
            card_item.label = res.data.data.data[99][i].ovLabel;
            this.carFuelTypeList.push(card_item);
          }
        }
      })
    },
    methods: {
      readCarInfo(data) {
        if (data.cards.length > 0) {
          //绑定车辆信息数据
          this.ruleForm.plate = data.cards[0].plate_no;
          this.ruleForm.carType = data.cards[0].vehicle_type;
          this.ruleForm.owner = data.cards[0].owner;
          this.ruleForm.address = data.cards[0].address;
          this.ruleForm.usingNature = data.cards[0].use_character;
          this.ruleForm.carCarBrand = data.cards[0].model;
          this.ruleForm.carFrameNo = data.cards[0].vin;
          this.ruleForm.carEngineNo = data.cards[0].engine_no;
          this.ruleForm.carDeliveryDate = data.cards[0].register_date;
          this.ruleForm.issueDate = data.cards[0].issue_date;
        }
        this.active = 1;
      },
      next(formName) {
        var that = this
        this.$refs[formName].validate(function (success, error) {
          eventVue.$emit("carData", that.ruleForm)
          that.active = 1;
          that.selected = 1;
          that.$store.commit('title', '房产情况')
          that.$emit('carStep', that.active);
          that.$emit('carStep2', that.selected);
        })
      }

    },
    components: {
      UploadCar
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .carLicense {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
    margin-bottom: 80px;
  }

  .form-item {
    min-width: 50%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .full {
    width: 100% !important;
  }

  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    min-height: 80px;
    background: #ddd;
    align-items: center;
    justify-content: center;
  }

</style>
